<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常德诗墙</title>

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" >
/*首页广告效果*/
$(function(){
     var len  = $("#number > li").length;
	 var index = 0;
	 var adTimer;
	 $("#number li").mouseover(function(){
		index = $("#number li").index(this);
		showImg(index);
	 }).eq(0).mouseover();	
	 //滑入 停止动画，滑出开始动画.
	 $('#slider').hover(function(){
			 clearInterval(adTimer);
		 },function(){
			 adTimer = setInterval(function(){
			    showImg(index)
				index++;
				if(index==len){index=0;}
			  } , 3000);
	 }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
  var sliderWidth = $("#slider").width();
  $("#show").stop(true,false).animate({left : -sliderWidth*index},800);
  $("#number li").removeClass("on")
	  .eq(index).addClass("on");
}
</script>
<link href="css/chengtoushan.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="slider">
  <ul id="show">
    <li><img src="images/renwen/1.jpg" width="524" height="304" alt="双龙洞"/></li>
    <li><img src="images/renwen/2.jpg" width="524" height="304" alt="双龙洞"/></li>
    <li><img src="images/renwen/3.jpg" width="524" height="304" alt="柳叶湖"/></li>
    <li><img src="images/renwen/4.jpg" width="524" height="304" alt="壶瓶山"/></li>
    <li><img src="images/renwen/5.jpg" width="524" height="304" alt="壶瓶山"/></li>
  </ul>
  <ul id="number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
</body>
</html>
